import * as echarts5 from 'echarts5'
import request from '@/utils/request'
import { ref } from 'vue'

/**
 * 概览列表
 * @returns {*}
 */
export function consultList() {
  return request({
    url: '/cloud/jcce/v1.0/kt1/overview',
    method: 'get'
  })
}

export default {
  data() {
    return {
      detailInfo: {}
    }
  },
  mounted() {
    const chart = echarts5.init(document.getElementById('chart'))
    const gradient = ref({
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0, color: '#8f97b8' // 0% 处的颜色
        },
        {
          offset: 0.25, color: '#708db9' // 25% 处的颜色
        },
        {
          offset: 0.5, color: '#e2b5e0' // 75% 处的颜色
        },
        {
          offset: 0.75, color: '#8be1d6' // 100% 处的颜色
        },
        {
          offset: 1, color: '#9fe0b4' // 75% 处的颜色
        }
      ],
      global: false // 缺省为 false
    })
    const option = {
      series: [
        {
          type: 'gauge',
          radius: '100%',
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 0,
              color: gradient.value
            }
          },
          axisLine: {
            lineStyle: {
              width: 15
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          data: [
            {
              value: this.detailInfo.jobInfo.value,
              name: this.detailInfo.jobInfo.status,
              title: {
                offsetCenter: ['0%', '0%']
              },
              detail: {
                valueAnimation: true,
                offsetCenter: ['0%', '10%']
              }
            }
          ],
          title: {
            fontSize: 28,
            color: '#5470c6'
          },
          detail: {
            width: 50,
            height: 14,
            fontSize: 30,
            color: 'inherit',
            borderColor: 'inherit',
            borderRadius: 20,
            borderWidth: 0,
            formatter: '{value}%',
            show: (this.detailInfo.jobInfo.status === '')
          }
        }
      ]
    }

    chart.setOption(option)
  },
  beforeMount() {
    this.detailInfo = this.$route.params.item
  },
  methods: {
    formatText(item) {
      return () => {
        return `${item.name}`
      }
    },

    getProgressColor(item) {
      if (item.value === 100) {
        return '#17a777'
      } else if (item.value === 0) {
        return '#f8f8fa'
      } else {
        return '#78b79e'
      }
    },
    getProgressTextColor(item) {
      if (item.value === 100) {
        return '#fff'
      } else {
        return '#585a5e'
      }
    },
    checkEnd(index) {
      if (this.detailInfo.graphInfo.length === index + 1) {
        return false
      } else {
        return true
      }
    }
  }
}
